import React, { Component, useEffect } from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';

import HomePage from "./pages/Home"
import DetailPage from "./pages/Detail"
import ListPage from "./pages/List"
import Logo from "./components/Logo"
import VideoCom from './pages/Video';

const BottomTab = () => {
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    switch(route.name) {
                        case '首页':
                            iconName = 'clockcircle';
                            break;
                        case '列表':
                            iconName = 'clockcircle';
                            break;
                    }
                    return (
                        <AntDesign 
                            name={iconName}
                            size={26}
                            color={color}
                        />
                    )
                }
            })}
            tarBarOptions={{
                activeTintColor:'#23b8ff',
                inactiveTintColor:'#999'
            }}
        >
            <Tab.Screen
                name="首页"
                component={HomePage}
            />
            <Tab.Screen
                name="列表"
                component={ListPage}
            />
        </Tab.Navigator>
    )
}

const TxClass = () => {
    const Stack = createStackNavigator();
    
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Tab">
                <Stack.Screen 
                    name="Tab"
                    component={BottomTab}
                    options={{
                        headerTitle: props => <Logo {...props}/>
                    }}
                />
                <Stack.Screen
                    name="Detail"
                    component={DetailPage}
                    options={{
                        headerTitle: <Logo/>,
                        //headerBackTitle: 'back'
                    }}
                />
                <Stack.Screen
                    name="Video"
                    component={VideoCom}
                    options={{
                        headerTitle: <Logo/>,
                        //headerBackTitle: 'back'
                    }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
    
}

export default TxClass;
